<template>
  <view class="page-container">
    <view v-if="state.ready">
      <scroll-view
        class="tab-scroll"
        :style="state.tab.style"
        scroll-x="true"
        :scroll-left="state.tab.left"
      >
        <view class="tab-list">
          <view
            class="tab-box"
            :class="state.tab.index == index ? 'active' : ''"
            v-for="(item, index) in state.tab.list"
            :key="index"
            @click="chTab(index)"
            >{{ item.name }}
          </view>
        </view>
      </scroll-view>
      <swiper
        class="swiper-wrap"
        :style="state.swiper.style"
        :current="state.tab.index"
        @change="chSwiper"
      >
        <swiper-item v-for="(item, index) in state.tab.list" :key="index">
          <listBox :ref="(el) => listItemRef(el, index)" :tab="item" />
        </swiper-item>
      </swiper>
    </view>
    <tt-loading :ready="state.ready"></tt-loading>
  </view>
</template>
<script setup lang="ts">
/**
 * 模块引入
 */
import { reactive, getCurrentInstance, onMounted } from "vue";
const { proxy } = getCurrentInstance();
import listBox from "./components/list-box.vue";
/**
 * 接口
 */

/**
 * 数据
 */
import { tab } from "@/mock/tab.ts";
const state = reactive({
  ready: false,
  tab: <any>{
    id: -1,
    value: "",
    index: 0,
    style: {},
    left: 0,
    list: tab,
  },
  swiper: {
    style: {},
    list: [],
  },
});
/**
 * 初始方法
 */
onMounted(() => {
  handleStyle();
  state.ready = true;
});

/**
 * 功能方法
 */

const chTab = (index: any) => {
  state.tab.index = index;
};
const chSwiper = (e: any) => {
  state.tab.index = e.detail.current;
  state.tab.type = state.tab.list[state.tab.index].label;
  listRef[state.tab.index].fetchList();
  moveTab();
};
const moveTab = () => {
  const systemInfo = proxy.$config.systemInfo();
  let centerPosition = systemInfo.screenWidth / 2;
  let tabPosition =
    state.tab.index * proxy.$utils.rpx2px(100) + proxy.$utils.rpx2px(50);
  if (tabPosition < centerPosition) {
    state.tab.left = 0;
  } else {
    state.tab.left = tabPosition - centerPosition;
  }
};

const handleStyle = () => {
  const systemInfo = proxy.$config.systemInfo();
  let height = `calc(${systemInfo.windowHeight}px - ${proxy.$utils.rpx2px(
    92
  )}px)`;
  state.swiper.style = {
    height,
  };
};
/**
 * 子组件方法
 * const child = ref()
 * child.value.fuc()
 */
const listRef = <any>[];
const listItemRef = (el: any, key: any) => {
  if (el) {
    listRef[key] = el;
    if (key == 0) {
      listRef[0].fetchList();
    }
  }
};
/**
 * 父组件传递生命周期方法
 * onShareAppMessage  分享好友
 * onShareTimeline 分享朋友圈
 * onReachBottom 页面内触底
 */
</script>
<style lang="scss" scoped>
@import url("@/static/css/theme.scss");
.page-container {
  .tab-scroll {
    position: sticky;
    z-index: 1;
    overflow: scroll;
    ::-webkit-scrollbar {
      display: none;
    }
    .tab-list {
      display: flex;
      white-space: nowrap;
      border-bottom: 1px solid #eee;

      .tab-box {
        position: relative;
        font-size: 28rpx;
        font-weight: 400;
        color: #666666;
        line-height: 40rpx;
        padding: 26rpx 26rpx;
      }
      .active {
        color: var(--main-color);
        &::after {
          position: absolute;
          content: "";
          width: 40rpx;
          height: 6rpx;
          bottom: 0;
          left: 50%;
          border-radius: 3rpx;
          transform: translateX(-50%);
          background: linear-gradient(162deg, #3e8dfd 0%, #1d54f9 100%);
        }
      }
    }
  }
}
</style>
